<!DOCTYPE html>
<!-- class="light" 的主要作用是为页面提供一个初始的主题状态标识 -->
<html lang="zh-CN" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明暗主题切换示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // 配置 Tailwind CSS
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // 自定义亮色主题颜色
                        light: {
                            primary: '#3b82f6',
                            secondary: '#8b5cf6',
                            background: '#f9fafb',
                            surface: '#ffffff',
                            text: '#1f2937',
                            textSecondary: '#6b7280',
                        },
                        // 自定义暗色主题颜色
                        dark: {
                            primary: '#60a5fa',
                            secondary: '#a78bfa',
                            background: '#0f172a',
                            surface: '#1e293b',
                            text: '#f1f5f9',
                            textSecondary: '#94a3b8',
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        /* 添加过渡动画 */
        body {
            @apply transition-colors duration-300 ease-in-out;
        }

        .theme-transition {
            @apply transition-all duration-300 ease-in-out;
        }

        .card {
            @apply theme-transition rounded-xl p-6 shadow-lg;
        }

        .btn {
            @apply theme-transition px-4 py-2 rounded-lg font-medium focus:outline-none focus:ring-2 focus:ring-offset-2;
        }
    </style>
</head>
<body class="min-h-screen bg-light-background dark:bg-dark-background text-light-text dark:text-dark-text">
<!-- 主容器 -->
<div class="container mx-auto px-4 py-8">
    <!-- 头部区域 -->
    <header class="flex justify-between items-center mb-12">
        <h1 class="text-3xl font-bold bg-gradient-to-r from-light-primary to-light-secondary dark:from-dark-primary dark:to-dark-secondary bg-clip-text text-transparent">
            主题切换演示
        </h1>

        <!-- 主题切换按钮 -->
        <button id="theme-toggle" class="btn flex items-center space-x-2 bg-light-surface dark:bg-dark-surface hover:bg-opacity-80 dark:hover:bg-opacity-80 shadow-md">
            <!-- 太阳图标（亮色主题时显示） -->
            <svg id="sun-icon" class="w-5 h-5 theme-transition" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
            </svg>

            <!-- 月亮图标（暗色主题时显示） -->
            <svg id="moon-icon" class="w-5 h-5 theme-transition hidden" fill="currentColor" viewBox="0 0 20 20">
                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
            </svg>

            <span id="theme-text" class="theme-transition">暗色主题</span>
        </button>
    </header>

    <!-- 主要内容区域 -->
    <main>
        <!-- 简介卡片 -->
        <div class="card bg-light-surface dark:bg-dark-surface mb-8">
            <h2 class="text-2xl font-semibold mb-4 text-light-text dark:text-dark-text">关于主题切换</h2>
            <p class="text-light-textSecondary dark:text-dark-textSecondary mb-4">
                这是一个演示如何实现明暗主题切换的示例页面。点击右上角的按钮可以在亮色和暗色主题之间切换。
            </p>
            <div class="flex items-center space-x-2 text-sm text-light-textSecondary dark:text-dark-textSecondary">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                <span>切换时所有元素都会平滑过渡</span>
            </div>
        </div>

        <!-- 功能卡片网格 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            <!-- 卡片1 -->
            <div class="card bg-light-surface dark:bg-dark-surface">
                <div class="w-12 h-12 rounded-lg bg-light-primary dark:bg-dark-primary flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-2">快速切换</h3>
                <p class="text-light-textSecondary dark:text-dark-textSecondary">
                    一键切换主题，所有元素同步变化，无闪烁现象。
                </p>
            </div>

            <!-- 卡片2 -->
            <div class="card bg-light-surface dark:bg-dark-surface">
                <div class="w-12 h-12 rounded-lg bg-light-secondary dark:bg-dark-secondary flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-2">平滑过渡</h3>
                <p class="text-light-textSecondary dark:text-dark-textSecondary">
                    使用 CSS 过渡动画，确保主题切换时的视觉体验流畅自然。
                </p>
            </div>

            <!-- 卡片3 -->
            <div class="card bg-light-surface dark:bg-dark-surface">
                <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-light-primary to-light-secondary dark:from-dark-primary dark:to-dark-secondary flex items-center justify-center mb-4">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-semibold mb-2">全局统一</h3>
                <p class="text-light-textSecondary dark:text-dark-textSecondary">
                    所有页面元素都会根据主题设置统一变化，保持视觉一致性。
                </p>
            </div>
        </div>

        <!-- 按钮示例 -->
        <div class="card bg-light-surface dark:bg-dark-surface">
            <h2 class="text-2xl font-semibold mb-6">按钮样式示例</h2>
            <div class="flex flex-wrap gap-4">
                <button class="btn bg-light-primary dark:bg-dark-primary text-white hover:bg-opacity-90 dark:hover:bg-opacity-90 focus:ring-light-primary dark:focus:ring-dark-primary">
                    主要按钮
                </button>
                <button class="btn bg-light-secondary dark:bg-dark-secondary text-white hover:bg-opacity-90 dark:hover:bg-opacity-90 focus:ring-light-secondary dark:focus:ring-dark-secondary">
                    次要按钮
                </button>
                <button class="btn bg-light-surface dark:bg-dark-surface border border-light-textSecondary dark:border-dark-textSecondary text-light-text dark:text-dark-text hover:bg-opacity-50 dark:hover:bg-opacity-50 focus:ring-light-textSecondary dark:focus:ring-dark-textSecondary">
                    轮廓按钮
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="mt-12 pt-6 border-t border-light-textSecondary dark:border-dark-textSecondary text-center">
        <p class="text-light-textSecondary dark:text-dark-textSecondary">
            明暗主题切换示例 - 使用 Tailwind CSS 实现
        </p>
    </footer>
</div>

<script>
    // 主题切换功能实现
    document.addEventListener('DOMContentLoaded', function() {
        // 获取相关DOM元素
        const themeToggle = document.getElementById('theme-toggle');
        const sunIcon = document.getElementById('sun-icon');
        const moonIcon = document.getElementById('moon-icon');
        const themeText = document.getElementById('theme-text');

        // 检查用户偏好的主题
        function getPreferredTheme() {
            // 首先检查本地存储
            const storedTheme = localStorage.getItem('theme');
            if (storedTheme) {
                return storedTheme;
            }

            // 如果没有存储的主题，则检查系统偏好
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                return 'dark';
            }

            // 默认使用亮色主题
            return 'light';
        }

        // 应用主题
        function applyTheme(theme) {
            if (theme === 'dark') {
                document.documentElement.classList.add('dark');
                sunIcon.classList.add('hidden');
                moonIcon.classList.remove('hidden');
                themeText.textContent = '亮色主题';
            } else {
                document.documentElement.classList.remove('dark');
                sunIcon.classList.remove('hidden');
                moonIcon.classList.add('hidden');
                themeText.textContent = '暗色主题';
            }

            // 保存用户选择的主题
            localStorage.setItem('theme', theme);
        }

        // 初始化主题
        const preferredTheme = getPreferredTheme();
        applyTheme(preferredTheme);

        // 主题切换事件处理
        themeToggle.addEventListener('click', function() {
            // 判断当前主题并切换
            const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            applyTheme(newTheme);
        });

        // 监听系统主题变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            // 只有在用户没有明确选择主题时才跟随系统变化
            if (!localStorage.getItem('theme')) {
                applyTheme(e.matches ? 'dark' : 'light');
            }
        });
    });

    /**
     * 实现原理说明：
     *
     * 1. CSS 类控制主题：
     *    - 使用 Tailwind CSS 的 dark: 前缀来定义暗色主题样式
     *    - 通过在 html 根元素上添加/移除 'dark' 类来切换主题
     *
     * 2. 平滑过渡效果：
     *    - 为所有需要过渡的元素添加 transition-all duration-300 ease-in-out 类
     *    - 在 body 和关键元素上应用全局过渡样式
     *
     * 3. 主题状态管理：
     *    - 使用 localStorage 保存用户主题偏好
     *    - 遵循用户偏好 > 系统偏好 > 默认亮色主题的优先级
     *
     * 4. 图标切换：
     *    - 根据当前主题显示对应的太阳/月亮图标
     *    - 使用 hidden 类控制图标的显示/隐藏
     *
     * 关键细节和注意事项：
     *
     * 1. 过渡一致性：
     *    - 所有颜色、背景、边框等样式变化都应添加过渡效果
     *    - 使用统一的过渡时间和缓动函数
     *
     * 2. 颜色系统设计：
     *    - 定义清晰的语义化颜色变量（primary, secondary, background等）
     *    - 确保亮色和暗色主题下的颜色对比度符合可访问性标准
     *
     * 3. 状态持久化：
     *    - 正确使用 localStorage 保存用户偏好
     *    - 处理用户清除缓存后的情况
     *
     * 4. 系统偏好支持：
     *    - 监听 prefers-color-scheme 媒体查询变化
     *    - 在用户未明确选择时跟随系统设置
     *
     * 5. 性能优化：
     *    - 避免频繁的 DOM 操作
     *    - 使用 CSS 类切换而非直接修改样式属性
     *
     * 6. 可访问性：
     *    - 确保足够的颜色对比度
     *    - 提供清晰的视觉反馈
     */
</script>
</body>
</html>